<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <myfoot></myfoot>
        <odiv></odiv>
        <div class="" id="menu"></div>
        <test></test>
        <!-- html中没有大写 如果有大写变成小写用驼峰命名 -->
        <my-menu></my-menu>
        <my-box></my-box>
    </div>



    <script>
        // 全局注册组件
        Vue.component("myhead", {
            template: "<header>这是一个自己创建的header组件</header>"
        });
        Vue.component('myfoot', {
            template: '<footer>这是自己创建的foot组件</footer>',
        });
        const Feature = Vue.component('odiv', {
            template: '<h3>注意组件名称不能与标签名称相同</h3>',
        });


        let test = {
            template: "<h1>test-test-test</h1>"
        }
        //创建组件名并加入到vue组件中
        Vue.component('Test', test);


        // 组件选项对象
        const menu = Vue.extend({
            template: '<h2>menu-menu-menu</h2>',
            methods: {},
            mounted() { },
            filters: {},
            components: {},
            directives: {}
        });
        new menu().$mount('#menu');
        Vue.component('myMenu', menu);
        let vm = new Vue({

            // 局部注册组件
            components: {
                // 这里的mybox就是组件名 这是局部注册组件
                myBox: {
                    template: '<h3><i>myBox-myBox-myBox</i></h3>'
                }
            },


            data() {
                return {
                    title: 'Vue组件的创建',
                };
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
            }
        }).$mount('#app')
    </script>
</body>

</html>